import React from 'react';
import './Header.css';
import MenuIcon from "@material-ui/icons/Menu";
import SearchIcon from "@material-ui/icons/Search";
import VideoCallIcon from "@material-ui/icons/VideoCall"
import AppsIcon from "@material-ui/icons/Apps"
import NotificationsIcon from "@material-ui/icons/Notifications";
import FaceIcon from "@material-ui/icons/Face"
import { Avatar } from '@material-ui/core';
import { Search } from '@material-ui/icons';
import { useState } from "react";
import { Link } from "react-router-dom";



function Header(){
    const [inputSearch, setInputSearch] = useState('')
    return (
        <div className="header">
            <div className="header__left">
                <MenuIcon />
                <Link to="/">
                    <img 
                        className="header__logo" 
                        src="https://www.logaster.com/blog/wp-content/uploads/2020/06/image4-1024x576-1024x576.jpg" 
                        alt="logo"
                    />
                </Link>
               
                
            </div>
            <div className="header__input">
                <input 
                    onChange={e => setInputSearch(e.target.value)} 
                    value={inputSearch} 
                    Placeholder="Search" 
                    type="text" 
                />
                <Link to={`/search/${inputSearch}`}>
                    <SearchIcon className="header__inputButton"/>
                </Link>
               
            </div>
            <div className="header__icons">
                <VideoCallIcon className="header__icon"/>
                <AppsIcon className="header__icon"/>
                <NotificationsIcon className="header__icon"/>
                <FaceIcon className="header__icon"/>
                <Avatar alt="myself" 
                src="https://tse4-mm.cn.bing.net/th/id/OIP.Ih0AHAoEP1fDROEHmPst2AHaK1?pid=ImgDet&rs=1"/>
            
            </div>
        </div>
    )
}

export default Header
